<template>
	<view class="c-xconetnt-video-wrap" @click="toPlayVido">
		<image class="posterIcon" :src='poster' :style="{ width: dpwidth + 'px', height: dpwidth/item.width * item.height + 'px' }"></image>
		<image class='palayIcon' src='https://vip-static.lmjx.net/inmark/u/images/video/player.png' mode='aspectFit' style='height: 80rpx;'></image>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			pwidth: Number
		},
		computed: {
			dpwidth() {
				if (this.pwidth) return this.pwidth;

				return this.$ba.dwidth();
			},
			poster() {
				return this.item.poster;
			}
		},
		methods: {
			toPlayVido() {
				let item = this.item;
				this.$go.videoPlayer(item.content, item.width, item.height, item.poster);
			}
		}
	}
</script>

<style>
	.c-xconetnt-video-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.c-xconetnt-video-wrap .posterIcon {}

	.c-xconetnt-video-wrap .palayIcon {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
